<template>
  <div>
    <van-nav-bar style="" title="效果图" left-arrow @click-left="onClickLeft">
      <template #right>
        <van-image id="right-text" width="20" height="20" src="/img/ss_3.png" />
      </template>
    </van-nav-bar>
    <div class="xuanxiang">
      <ul class="room">
        <li>全部</li>
        <li>客厅</li>
        <li>卧室</li>
        <li>厨房</li>
        <li>卫生间</li>
        <li>阳台</li>
        <li>书房</li>
        <li>衣帽间</li>
        <li>楼梯</li>
      </ul>
      <ul class="room_style">
        <li>全部</li>
        <li>北欧极简</li>
        <li>现代简约</li>
        <li>美式田园</li>
        <li>日式风格</li>
        <li>中式风格</li>
      </ul>
      <ul class="room_css">
        <li>全部</li>
        <li>榻榻米</li>
        <li>电视背景墙</li>
        <li>衣柜</li>
        <li>吊顶</li>
        <li>飘窗</li>
        <li>橱柜</li>
        <li>鞋柜</li>
      </ul>
      <ul class="room_color">
        <li>全部</li>
        <li>白色</li>
        <li>灰色</li>
        <li>蓝色</li>
        <li>绿色</li>
        <li>橙色</li>
        <li>红色</li>
        <li>粉色</li>
        <li>紫色</li>
      </ul>
    </div>
    <div class="main" v-for="x in 10" :key="x">
      <img   src="../assets/TJ/2.jpg" alt="" />
      <span>2022年装修颜值天花板法式轻奢风</span>   
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    onClickLeft() {
      this.$router.back();
    },
  },
};
</script>

<style lang="scss" scoped>
*{
  margin: 0;
  padding: 0;
}
// 效果图 三个字
::v-deep .van-nav-bar__title {
  color: #1989fa;
}
// 效果图页面 选项
.xuanxiang{
  overflow: hidden;
    text-overflow: ellipsis;
  >ul{
    >:first-child{
      color:#1989fa;
      padding:2px 5px;
      border: 1px solid;
      border-radius: 50px;
      background: #EEF2FB

    }
     margin-top: 12px;
     display: flex;
    justify-content: space-evenly;
    >li{

      font-size: 14px;
      font-weight: 400;
      padding:2px 5px;
    }
  }

}

//主体
.main{
   display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    
  >img{
    
    display: block;
    width: 47%;
    margin: 1.25rem 0.3125rem;
    
  }
  
}

</style>
